<template>
	<view class="index page b-bg">
		<view class="userBox">
			<view class="logoBox">
				<image src="../../static/img/logo.png" mode="" class="logo"></image>
			</view>
			<user></user>
		</view>
		<view class="banner block">
			<view class="swiperBox" :style="{ backgroundImage: `url(${banner_image})`}">
				<!-- <swiper class="swiper" :autoplay="autoplay" :interval="interval">
						<swiper-item>
							<view class="swiper-item uni-bg-red">A</view>
						</swiper-item>
						<swiper-item>
							<view class="swiper-item uni-bg-green">B</view>
						</swiper-item>
						<swiper-item>
							<view class="swiper-item uni-bg-blue">C</view>
						</swiper-item>
				</swiper> -->
			</view>
		</view>
		<view class="block filter">
			<view class="title">
				全部活动
			</view>
			<view class="add-form color">
				<view id="selectLong">
					<uni-data-select
						 v-model="filer_data.city_id"
						 :localdata="rangeAddr"
						  :clear="false"
						 @change="change"
					   ></uni-data-select>
				</view>
				<view class="selecBox">
					<uni-data-select
						 v-model="filer_data.year"
						 :localdata="rangeTime"
						  :clear="false"
						 @change="change"
					   ></uni-data-select>
				</view>
			</view>
		</view>
		<scroll-view class="items" scroll-y="true" @scrolltolower="scrolltolower" lower-threshold="50">
			<view class="items-row">
			<view class="item" v-for="(item,index) in list" @tap="goTab(item.id)" :key="index">
				<!-- <view class="in-lab">进行中</view> -->
				<view class="imgBox" :style="{ backgroundImage: `url(${item.image})`}"></view>
				<view class="in-title">
					{{item.title}}
				</view>
				<view class="in-f-title">
					{{item.store}}
				</view>
				<view class="in-time">
					<!-- 2024/04/23-2024/08/01 -->
					{{$ft.fomartTime(item.start_time)}}-{{$ft.fomartTime(item.end_time)}}
				</view>
			</view>
			<view class="more-bottom">
				<text v-show="!page.is_bottom">加载中...</text>
				<text v-show="page.is_bottom">没有更多了></text>
			</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				filer_data:{
					year:2024,
					city_id:""
				},
				banner_image:"",
				page:{
					is_bottom:false,
					page:1
				},
				list:[],
				rangeTime:[{text:2024,value:2024}],
				rangeAddr:[{text:"全省",value:1},{text:"全市",value:2}]
			};
		},
		onLoad() {
			try {
				const value = uni.getStorageSync('token');
				if (value) {
					// console.log(value);
				} else {
					uni.navigateTo({
						url:'/pages/login/login'
					})
				}
			} catch (e) {
				// error
				uni.navigateTo({
					url:'/pages/login/login'
				})
			}
			// this.getYear();
			this.getCity();
			this.getYear();
		},
		methods: {
			async getYear() {
			  const res = await this.$httpPub({
				  url:'activity/year',
				  method:'get',
				  data:{}
			  })
			  if(res.map.length > 0) {
				  this.rangeTime = res.map((item) => {
				  	return {
				  		text:item.year,
				  		value:item.year
				  	}
				  })
			  }
			},
			async getCity() {
			  const res = await this.$httpPub({
				  url:'public/region',
				  method:'get',
				  data:{}
			  })
			  this.rangeAddr = res.map((item) => {
			  	return {
			  		text:item.name,
			  		value:item.id
			  	}
			  })
			  this.rangeAddr.unshift({
			  	text:'全省',
			  	value:""
			  })
			  this.getList();
			},
			// async getList2(){
			// 	let res = await this.$api.test({
			// 		url:'activity/list',
			// 		method:'get',
			// 		params:{
			// 			page:1,
			// 			page_count:8,
			// 			year:2024,
			// 			city_id:""
			// 		}
			// 	});
			// 	console.log('index收到',res);
			// },
			async getList(res) {
				    if(res) {
				    	this.list = [];
				    	this.page = {
				    		is_bottom:false,
				    		page:1
				    	}
				    } 
					if(!this.page.is_bottom) {
						let postData = {
							page:this.page.page,
							page_count:8,
							...this.filer_data
						}
						const res = await this.$http({
							  url:'activity/list',
							  method:'get',
							  data:postData
						})
						// console.log(res);
						this.banner_image = res.banner_image;
						// console.log(res);
						if(res) {
							this.list.push(...res.data);
							if(res.current_page == res.last_page) {
								this.page.is_bottom = true;
							} else {
								this.page.page ++;
							}
						}
						
					}
			},
			goTab(id) {
				uni.navigateTo({
				    url: "../tab-infor/tab-infor?id="+id
				});
			},
			change(e) {
				console.log(3);
				this.getList(1);
			},
			scrolltolower() {
				this.getList();
			}
		}
	}
</script>

<style lang="scss">
	.page {
		.add-form {
			padding: 0;
		}
	}
  .block {
	  width: 100%;
	  padding: 0rpx 34rpx 40rpx;
  }
	

  .filter {
	  display: flex;
	  align-items: center;
	  justify-content: space-between;
	  padding-bottom: 6px;
	  .add-form  {
	  	display: flex;  
	  }
	  
  }
  .items {
	  position: fixed;
	  top:590rpx;
	  bottom: 0;
	  left: 0;
	  width: 100%;
	  box-sizing: border-box;
	  .items-row {
		  display: flex;
		  justify-content: space-between;
		  flex-wrap: wrap;
		  padding-left: 34rpx;
		  padding-right: 27rpx;
		  padding-bottom: 24rpx;
	  }
	  .item {
		  width: 329rpx;
		  padding-bottom: 32rpx;
		  position: relative;
		  .in-lab {
			  position: absolute;
			  right: 0;
			  top:0;
			  border-radius: 0 $border-radius 0 $border-radius !important;
			  padding: 8rpx 18rpx;
			  background-color: #f24545;
			  color:#fff;
			  font-size: 26rpx;
			  &.disable {
				  background-color: #e3cbcb;
				  color:#fff;
			  }
		  }
		  .imgBox {
		  		width: 100%;
				height: 232rpx;
				border-radius: $border-radius;
				overflow: hidden;
		  }
		  .in-title {
			  padding-top: 20rpx;
			  height: 100rpx;
			  font-size: 30rpx;
			  font-weight: 550;
			  @include textTwo();
		  }
		  .in-f-title {
			  padding-top: 18rpx;
			  font-size: 28rpx;
			   @include text();
		  }
		  .in-time {
			  padding-top: 18rpx;
			  font-size: 26rpx;
			  color:#cccccc;
		  }
	  }
  }
  
 
</style>
